<div class="row" style="min-width: 1400px">
  <div class="row" style="height: 90px;background-color: #1e88e5"></div>
  <div class="row" style="height: 800px;margin-top: 30px">
    <div class="col-sm-1 col-xs-1"></div>
    <div class="col-sm-2 col-xs-2 text-center">
      <div class="thumbnail" *ngIf="currentUser">
        <img src="https://www.gravatar.com/avatar/{{currentUser.gravatars}}?s=200" alt="headImg"
             style="width:150px;height:150px;border-radius:100px;border:3px solid #dfe2e6;-moz-border-radius:100px; /* Old Firefox */">
        <div class="caption">
          <h3 style="padding: 15px">{{currentUser.nickName}}</h3>
          <p>正式会员</p>
          <p><a routerLink="#" class="btn btn-primary" role="button">签到</a></p>
        </div>
      </div>

      <hr>
      <div class="list-group">
        <a class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
           aria-expanded="true" aria-controls="collapseOne" (click)="show_bs_collapse('isCollapseOne')" [class.active]="isCollapseOne">
          <h4 class="list-group-item-heading"><i class="fa fa-book" aria-hidden="true"></i>
            <span style="padding: 0 10px 0 10px">文章</span>
            <i class="fa fa-chevron-down" [class.fa-chevron-left]="!isCollapseOne" [class.fa-chevron-down]="isCollapseOne" aria-hidden="true"></i>
          </h4>
        </a>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <a routerLink="/back/articleupload" class="list-group-item list-group-item-info">发布文章</a>
          <a routerLink="/back/articlemanage" class="list-group-item list-group-item-info">管理文章</a>
        </div>

        <a class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
           aria-expanded="true" aria-controls="collapseTwo" (click)="show_bs_collapse('isCollapseTwo')" [class.active]="isCollapseTwo">
          <h4 class="list-group-item-heading"><i class="fa fa-users" aria-hidden="true"></i>
            <span style="padding: 0 10px 0 10px">活动</span>
            <i class="fa fa-chevron-left" [class.fa-chevron-left]="!isCollapseTwo" [class.fa-chevron-down]="isCollapseTwo" aria-hidden="true"></i>
          </h4>
        </a>
        <div id="collapseTwo" class="panel-collapse collapse"  role="tabpanel" aria-labelledby="headingOne">
          <a routerLink="/back/activityupload" class="list-group-item list-group-item-info">发布活动</a>
          <a routerLink="/back/activitymanage" class="list-group-item list-group-item-info">管理活动</a>
        </div>

        <a class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapseThere"
           aria-expanded="true" aria-controls="collapseThere" (click)="show_bs_collapse('isCollapseThere')" [class.active]="isCollapseThere">
          <h4 class="list-group-item-heading"><i class="fa fa-cogs" aria-hidden="true"></i>
            <span style="padding: 0 10px 0 10px">设置</span>
            <i class="fa fa-chevron-left" [class.fa-chevron-left]="!isCollapseThere" [class.fa-chevron-down]="isCollapseThere" aria-hidden="true"></i>
          </h4>
        </a>
        <div id="collapseThere" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <a routerLink="#" class="list-group-item list-group-item-info">修改头像</a>
          <a routerLink="#" class="list-group-item list-group-item-info">扩展信息</a>
          <a routerLink="#" class="list-group-item list-group-item-info">个人信息</a>
          <a routerLink="#" class="list-group-item list-group-item-info">账户安全</a>
        </div>
      </div>
    </div>
    <div class="col-sm-8 col-xs-8" style="margin-top: 2%">
      <router-outlet></router-outlet>
    </div>
    <div class="col-sm-1 col-xs-1"></div>
  </div>
</div>


